<script setup lang="ts">
  import {
    CheckCircleFilled,
    CancelFilled,
    KeyboardArrowUpOutlined,
    KeyboardArrowDownOutlined,
    FileDownloadOutlined,
  } from '@vicons/material'
  import { NIcon, NButton } from 'naive-ui'
  import { useRoute, useRouter } from 'vue-router'
  import SvgIcon from '@/components/SvgIcon/index.vue'
  import { onMounted, ref } from 'vue'
  import WordPreview from '@/components/WordPreview/index.vue'
  import { downloadScheme, getSchemeAuditDetail } from '@/api/scheme'
  import BackNav from '@/components/common/BackNav/index.vue'
  import { Typewriter } from 'vue-element-plus-x'
  import { useAgent } from '@/hooks/useAgent'
  const { userName } = useAgent()
  const route = useRoute()
  const id = route.params.id as string
  const pass = route.params.pass as string
  const passText = pass === '2' || pass === '4' ? '修改方案' : '下载方案'
  const libId = route.query.libId as string
  onMounted(async () => {
    await init()
  })

  const schemeName = ref('')
  const init = async () => {
    const res = await getSchemeAuditDetail({ schemeId: id })
    if (res) {
      file.value = res.schemeUrl
      schemeName.value = res.schemeName
      res.auditRecordDtos.forEach((item: any) => {
        item.showDesc = true
      })
      timeline.value = res.auditRecordDtos
    }
  }
  const handleAudit = async () => {
    if (pass === '1') {
      // window.open(file.value, '_blank')
      const res = await downloadScheme({ id, schemeName: schemeName.value })
      const blob = new Blob([res], { type: 'application/docx' })
      const url = URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = `${schemeName.value}.docx`
      a.click()
      URL.revokeObjectURL(url)
    } else {
      await handleEdit()
    }
  }

  const router = useRouter()
  const handleEdit = async () => {
    await router.push({
      path: '/createGenerate/2',
      query: {
        id,
        libId,
      },
    })
  }
  const timeline = ref<any[]>([])

  const file = ref()
  const wordPreviewId = ref(`${new Date().getTime()}`)
</script>

<template>
  <div class="h-full flex py-5 gap-4 pingfang result-page">
    <div class="h-full bg-white rounded flex-1 flex flex-col gap-4">
      <BackNav class="border-b border-b-[#F0F0F0]" title="原文概览" />
      <div class="flex-1">
        <div class="h-full bg-white rounded p-5">
          <WordPreview
            v-if="file"
            mode="view"
            :file="file"
            :id="wordPreviewId"
            :userName="userName"
          />
        </div>
      </div>
    </div>
    <div class="h-full bg-white rounded w-[724px]">
      <div
        class="h-[58px] leading-[58px] px-5 flex items-center justify-between"
        :class="{ 'border-b border-b-[#F0F0F0]': pass === '3' }"
      >
        <div class="font-bold text-[20px]">审核结果</div>
        <div class="flex items-center gap-2" v-if="pass !== '2'">
          <n-button
            @click="handleAudit"
            type="primary"
            class="flex items-center"
            v-if="pass !== '3'"
          >
            <template #icon>
              <SvgIcon v-if="pass === '2'" name="file-edit" class="text-[12px] text-[#fff]" />
              <FileDownloadOutlined v-else class="text-[12px] text-[#fff]" />
            </template>
            {{ passText }}
          </n-button>
          <n-button
            v-else
            type="primary"
            @click="handleEdit"
            disabled
            class="!text-[#A3A7AD] flex items-center !border-none !bg-[#F5F5F5]"
          >
            <template #icon>
              <FileDownloadOutlined class="text-[12px] text-[#A3A7AD]" />
            </template>
            {{ passText }}
          </n-button>
        </div>
      </div>
      <div class="h-[calc(100%-58px)] overflow-y-auto">
        <div class="h-full bg-white rounded px-5 py-6">
          <div class="relative mb-[6px]" v-for="(item, index) in timeline" :key="item.id">
            <div class="flex gap-3">
              <div class="relative h-[37px] w-[37px]">
                <div
                  class="h-8 leading-8 w-8 rounded bg-[#0B5CFF] text-white text-center text-[16px] font-medium pingfang"
                >
                  {{ item.auditorName.length > 0 ? item.auditorName.slice(0, 1) : '审' }}
                </div>
                <div
                  class="flex items-center justify-center absolute bottom-0 right-0 w-[12px] h-[12px] rounded-full bg-[#fff]"
                >
                  <n-icon class="text-[12px]">
                    <CheckCircleFilled
                      v-if="+item.auditStatus === 0 || +item.auditStatus === 1"
                      class="text-[#00B42A]"
                    />
                    <CancelFilled v-else class="text-[#F5222D]" />
                  </n-icon>
                </div>
              </div>
              <div class="w-full">
                <div class="h-8 leading-8 text-[#000] font-medium">{{ item.auditorName }}</div>
                <div class="flex items-center justify-between w-full mb-2">
                  <div
                    v-if="+item.auditStatus === 0"
                    class="text-[14px] text-[#4A5055] cursor-pointer"
                  >
                    提交审核
                  </div>
                  <div
                    v-else
                    class="text-[14px] flex items-center gap-1 cursor-pointer"
                    @click="item.showDesc = !item.showDesc"
                  >
                    <div :class="+item.auditStatus === 2 ? 'text-[#F5222D]' : 'text-[#00B42A]'">
                      {{ +item.auditStatus === 1 ? '审核通过' : '审核未通过' }}
                    </div>
                    <n-icon>
                      <KeyboardArrowUpOutlined v-if="item.showDesc" />
                      <KeyboardArrowDownOutlined v-else />
                    </n-icon>
                  </div>
                  <div class="text-[#4A5055]">{{ item.createTime }}</div>
                </div>
                <div
                  v-if="item.showDesc && +item.auditStatus !== 0"
                  class="text-[14px] text-[#000000] px-4 py-2 rounded bg-[#F6F6F6] leading-[22px]"
                >
                  <Typewriter :content="item.auditResult" is-markdown />
                </div>
              </div>
            </div>
            <div
              v-if="index !== timeline.length - 1"
              class="absolute bottom-0 w-0 top-[38px] left-4 border-l border-l-[#D9D9D9] border-dashed"
            ></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
  .result-page {
    :deep(.n-button.n-button--disabled .n-button__border) {
      border: none;
    }
  }
</style>
